<link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel="import" href="../../bower_components/paper-button/paper-button.html">
<link rel="import" href="../../bower_components/paper-styles/typography.html">
<link rel="import" href="../../bower_components/paper-spinner/paper-spinner.html">
<link rel="import" href="../../bower_components/paper-listbox/paper-listbox.html">
<link rel="import" href="../../bower_components/app-route/app-location.html">

<link rel="import" href="../helpers/dialog-element.html">
<link rel="import" href="../app-form/app-form.html">

<dom-module id="record-create">
    <template>
        <style include="shared-styles forms single-page">
        #content {
            max-width: 900px;
        }
        
        paper-material {
            display: block;
            padding: 24px;
        }
        
        paper-progress {
            position: absolute;
            bottom: 85px;
            width: 100%;
            left: 0;
            right: 0;
        }
        
        :host >::slotted(paper-input-container) {
            padding-top: 16px;
            padding-bottom: 16px;
        }
        </style>
        <app-location route="{{route}}"></app-location>
        <div id="content">
            <paper-material class="single-head layout horizontal" style$="background-color: [[section.color]]">
                <span class="icon"><iron-icon icon="[[section.icon]]"></iron-icon></span>
                <div class="title flex">
                    <h2>
                        Create Record
                    </h2>
                    <div class="subtitle">
                    </div>
                </div>
            </paper-material>
            <paper-material>
                <div class="grid-row">
                    <paper-dropdown-menu class="dropdown-block l6 xs12" label="Choose Record Type" horizontal-align="left">
                        <paper-listbox slot="dropdown-content" attr-for-selected="value" selected="{{selectedRecordType}}" class="dropdown-content">
                            <template is="dom-repeat" items="[[recordTypes]]" as="recordType">
                                <paper-item value="[[recordType]]">[[recordType]]</paper-item>
                            </template>
                        </paper-listbox>
                    </paper-dropdown-menu>
                </div>
            </paper-material>
            <paper-material class$="selected-[[!selectedRecordType]]">
                <div hidden$=[[selectedRecordType]]>
                    <p>Depending on the record type there maybe needed parameters. Choose a record type to continue.</p>
                </div>
                <div hidden$=[[!selectedRecordType]]>
                    <app-form fields="[[fields]]" form="[[record]]" url="/api/v1/clouds/[[zone.cloud]]/zones/[[zone.id]]/records" on-response="_handleCreateRecordResponse" on-error="_handleError"></app-form>
                </div>
            </paper-material>
        </div>
    </template>
    <script>
        (function() {
            'use strict';

            Polymer({
                is: 'record-create',

                properties: {
                    section: {
                        type: Object
                    },
                    model: {
                        type: Object
                    },
                    zone_id: {
                        type: String,
                        value: "",
                    },
                    zone: {
                        type: Object
                    },
                    recordTypes: {
                        type: Array,
                        value: ["A", "AAAA","CNAME","MX","NS","SOA","TXT"],
                    },
                    selectedRecordType: {
                        type: String,
                        value: false
                    },
                    record: {
                        type: Object,
                        value: function() {
                            return {
                                name: '',
                                type: '',
                                rdata: '',
                                ttl: 3600
                            }
                        }
                    },
                    fields: {
                        type: Array,
                        value: function () { return []; }
                    },
                    fieldsA: {
                        type:Array,
                        value: [{
                            name: "name",
                            label: "Name *",
                            type: "text",
                            value: "",
                            defaultValue: "",
                            placeholder: "",
                            suffix: "",
                            errorMessage: "The subdomain for this A record is required",
                            helptext: "Please provide the subdomain for this A record (e.g. machine1.mist.io). The domain is already provided",
                            show: true,
                            required: true,
                            options: []
                        }, {
                            name: "rdata",
                            label: "Rdata *",
                            type: "text",
                            value: "",
                            defaultValue: "",
                            placeholder: "",
                            excludeFromPayload: true,
                            errorMessage: "The rdata are required for this record",
                            helptext: "Please provide an IPv4 for this record (e.g. 172.16.254.1)",
                            show: true,
                            required: true
                        }, {
                            name: "ttl",
                            label: "TTL",
                            type: "text",
                            pattern: "[0-9]*",
                            errorMessage: "Please enter a numerical value.",
                            value: 3600,
                            defaultValue: 3600,
                            placeholder: "",
                            show: true,
                            required: false
                        }]
                    },
                fieldsAAAA: {
                        type:Array,
                        value: [{
                            name: "name",
                            label: "Name *",
                            type: "text",
                            value: "",
                            defaultValue: "",
                            placeholder: "",
                            suffix: "",
                            errorMessage: "The subdomain for this AAAA record is required",
                            helptext: "Please provide the subdomain for this AAAA record (e.g. machine1.mist.io). The domain is already provided",
                            show: true,
                            required: true,
                            options: []
                        }, {
                            name: "rdata",
                            label: "Rdata *",
                            type: "text",
                            value: "",
                            defaultValue: "",
                            placeholder: "",
                            excludeFromPayload: true,
                            errorMessage: "The rdata are required for this record",
                            helptext: "Please provide an IPv6 for this AAAA record (e.g. 2001:db8:0:1234:0:567:8:1)",
                            show: true,
                            required: true
                        }, {
                            name: "ttl",
                            label: "TTL",
                            type: "text",
                            pattern: "[0-9]*",
                            errorMessage: "Please enter a numerical value.",
                            value: 3600,
                            defaultValue: 3600,
                            placeholder: "",
                            show: true,
                            required: false
                        }]
                },
                fieldsCNAME: {
                        type:Array,
                        value: [{
                            name: "name",
                            label: "Name *",
                            type: "text",
                            value: "",
                            defaultValue: "",
                            placeholder: "",
                            suffix: "",
                            errorMessage: "The subdomain for this CNAME record is required (e.g. machine1.mist.io). The domain is already provided",
                            helptext: "Please provide the subdomain for the record",
                            show: true,
                            required: true,
                            options: []
                        }, {
                            name: "rdata",
                            label: "Rdata *",
                            type: "text",
                            value: "",
                            defaultValue: "",
                            placeholder: "",
                            excludeFromPayload: true,
                            errorMessage: "The rdata are required for this record",
                            helptext: "Please provide a hostname for this CNAME record (e.g. subdomain.example.com)",
                            show: true,
                            required: true
                        }, {
                            name: "ttl",
                            label: "TTL",
                            type: "text",
                            pattern: "[0-9]*",
                            errorMessage: "Please enter a numerical value.",
                            value: 3600,
                            defaultValue: 3600,
                            placeholder: "",
                            show: true,
                            required: false
                        }]
                },
                fieldsMX: {
                        type:Array,
                        value: [{
                            name: "name",
                            label: "Name *",
                            type: "text",
                            value: "",
                            defaultValue: "",
                            placeholder: "",
                            suffix: "",
                            errorMessage: "The name for this MX record is required",
                            helptext: "Please provide the name for the MX record (e.g. mailserver.mist.io)",
                            show: true,
                            required: true,
                            options: []
                        }, {
                            name: "rdata",
                            label: "Rdata *",
                            type: "text",
                            value: "",
                            defaultValue: "",
                            placeholder: "",
                            excludeFromPayload: true,
                            errorMessage: "The rdata are required for this MX record",
                            helptext: "Please provide the required rdata for this MX record in the following format: 'MX_level mailserver_hostname' (e.g. '10 mailserver.mist.io'), quotes not required",
                            show: true,
                            required: true
                        }, {
                            name: "ttl",
                            label: "TTL",
                            type: "text",
                            pattern: "[0-9]*",
                            errorMessage: "Please enter a numerical value.",
                            value: 3600,
                            defaultValue: 3600,
                            placeholder: "",
                            show: true,
                            required: false
                        }]
                },
                fieldsNS: {
                        type:Array,
                        value: [{
                            name: "name",
                            label: "Name *",
                            type: "text",
                            value: "",
                            defaultValue: "",
                            placeholder: "",
                            suffix: "",
                            errorMessage: "The name for this NS record is required",
                            helptext: "Please provide the NS record name",
                            show: true,
                            required: true,
                            options: []
                        }, {
                            name: "rdata",
                            label: "Rdata *",
                            type: "text",
                            value: "",
                            defaultValue: "",
                            placeholder: "",
                            excludeFromPayload: true,
                            errorMessage: "The rdata are required for this record",
                            helptext: "Please provide the nameserver rdata for this NS record",
                            show: true,
                            required: true
                        }, {
                            name: "ttl",
                            label: "TTL",
                            type: "text",
                            pattern: "[0-9]*",
                            errorMessage: "Please enter a numerical value.",
                            value: 3600,
                            defaultValue: 3600,
                            placeholder: "",
                            show: true,
                            required: false
                        }]
                },
                fieldsSOA: {
                        type:Array,
                        value: [{
                            name: "name",
                            label: "Name *",
                            type: "text",
                            value: "",
                            defaultValue: "",
                            placeholder: "",
                            suffix: "",
                            errorMessage: "The name for this SOA record is required",
                            helptext: "Please provide the name for this SOA record",
                            show: true,
                            required: false,
                            options: []
                        }, {
                            name: "rdata",
                            label: "Rdata *",
                            type: "text",
                            value: "",
                            defaultValue: "",
                            placeholder: "",
                            excludeFromPayload: true,
                            errorMessage: "The rdata are required for this record",
                            helptext: "Please provide a hostname for this record",
                            show: true,
                            required: true
                        }, {
                            name: "ttl",
                            label: "TTL",
                            type: "text",
                            pattern: "[0-9]*",
                            errorMessage: "Please enter a numerical value.",
                            value: 3600,
                            defaultValue: 3600,
                            placeholder: "",
                            show: true,
                            required: false
                        }]
                },
                fieldsTXT: {
                        type:Array,
                        value: [{
                            name: "name",
                            label: "Name *",
                            type: "text",
                            value: "",
                            defaultValue: "",
                            placeholder: "",
                            suffix: "",
                            errorMessage: "The subdomain for this TXT record is required",
                            helptext: "Please provide the name for this TXT record (e.g. txt.mist.io). The domain is already provided",
                            show: true,
                            required: true,
                            options: []
                        }, {
                            name: "rdata",
                            label: "Rdata *",
                            type: "text",
                            value: "",
                            defaultValue: "",
                            placeholder: "",
                            excludeFromPayload: true,
                            errorMessage: "The rdata are required for this record",
                            helptext: "Please provide the relevant rdata for this TXT record (e.g. 'This is an example txt')",
                            show: true,
                            required: true
                        }, {
                            name: "ttl",
                            label: "TTL",
                            type: "text",
                            pattern: "[0-9]*",
                            errorMessage: "Please enter a numerical value.",
                            value: 3600,
                            defaultValue: 3600,
                            placeholder: "",
                            show: true,
                            required: false
                        }]
                },
            },
            observers: [
                '_typeChanged(selectedRecordType, fields)',
                '_zoneChanged(zone.id)',
            ],
            listeners: {
                'change': 'updateFields'
            },

            updateFields: function(e){
                this.set('formError', false);
                this.updatePayload();            
            },
            updatePayload: function(){
                if (this.fields.length && this.zone){
                    // update payload
                    var payload = {};
                    
                    payload['type'] = this.selectedRecordType;

                    var name = this.fields.findIndex(function(field) {
                        return field.name == "name";
                    }, this);
                    payload['name'] = this.fields[name].value + this.fields[name].suffix + '.';

                    var rdata = this.fields.findIndex(function(field) {
                        return field.name == "rdata";
                    }, this);
                    payload['data'] = this.fields[rdata].value;

                    var ttl = this.fields.findIndex(function(field) {
                        return field.name == "ttl";
                    }, this);
                    payload['ttl'] = this.fields[ttl].value;

                    this.set('record', payload);
                    console.warn('Update Payload:' + payload)
                }
            },
            _zoneChanged: function(zone_id) {
                if (this.zone_id != zone_id) {
                    this.zone_id = zone_id;
                    this.selectedRecordType = false;
                    this.set('fields', []);
                    this.updateFields();
                }
            },
            _typeChanged: function(selectedRecordType, fields) {
                if (this.selectedRecordType == "A") {
                    this.fieldsA[0].suffix = '.' + this.zone.domain.slice(0, -1);
                    this.set('fields', this.fieldsA);
                } else if (this.selectedRecordType == "AAAA") {
                    this.fieldsAAAA[0].suffix = '.' + this.zone.domain.slice(0, -1);
                    this.set('fields', this.fieldsAAAA);
                } else if (this.selectedRecordType == "CNAME") {
                    this.fieldsCNAME[0].suffix = '.' + this.zone.domain.slice(0, -1);
                    this.set('fields', this.fieldsCNAME);
                } else if (this.selectedRecordType == "MX") {
                    this.fieldsMX[0].suffix = '.' + this.zone.domain.slice(0, -1);
                    this.set('fields', this.fieldsMX);
                } else if (this.selectedRecordType == "NS") {
                    this.fieldsNS[0].suffix = '.' + this.zone.domain.slice(0, -1);
                    this.set('fields', this.fieldsNS);
                } else if (this.selectedRecordType == "SOA") {
                    this.fieldsSOA[0].suffix = '.' + this.zone.domain.slice(0, -1);
                    this.set('fields', this.fieldsSOA);
                } else if (this.selectedRecordType == "TXT") {
                    this.fieldsTXT[0].suffix = '.' + this.zone.domain.slice(0, -1);
                    this.set('fields', this.fieldsTXT);
                }
                this.updateFields();
            },
            _handleCreateRecordResponse: function(e){
                var response = YAML.parse(e.detail.xhr.response);
                this.dispatchEvent(new CustomEvent('toast', { bubbles: true, composed: true, detail: {msg:'Record was created successfully.',duration:3000} }));

                var url = document.location.pathname;
                this.dispatchEvent(new CustomEvent('go-to', { bubbles: true, composed: true, detail: {url: url.substring(0, url.indexOf("/+create"))} }));

            },
            _handleError: function(e) {
                console.log(e);
                this.$.errormsg.textContent = e.detail.request.xhr.responseText;
                this.set('formError', true);
            },
            _goBack: function() {
                history.back();
            }
            });
        })();
    </script>
</dom-module>
